<template>
  <div>
    <router-view></router-view>
    <div class="page">
      <article class="container">
        <header class="header">
          <div class="top">
            <a href="#" class="gps iconfont icon-tubiaozhizuomoban-13"></a>
            <a href="#" class="logo"
              ><img src="../../assets/images/logo.png" alt="logo"
            /></a>
            <form action="#">
              <input type="search" placeholder="按内容搜索" @keydown.enter="upthis()" v-model="searchcontent" />
            </form>
            <a href="#" class="stor iconfont icon-shangdian"> </a>
          </div>
          <div class="navbar">
            <ul>
              <li class="navactive">
                <a href="#">推荐</a>
              </li>
              <!-- <li><a>女装</a></li> -->
              <li v-for="(item, index) in oindexlist" :key="index">
                <a>{{ item.catename }}</a>
              </li>
              <!-- <li><a>居家</a></li>
                        <li><a>母婴</a></li>
                        <li><a>美妆</a></li> -->
            </ul>
            <div class="fen iconfont icon-39">分类</div>
          </div>
        </header>
        <section class="banertop">
          <div class="banimg">
            <!-- <img  v-for="(item,index) in oindexban" :key="index"  src="../../assets/images/圆角矩形.png" alt="banner"> -->

            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="item in oindexban" :key="item.id">
                <img :src="$pre + item.img" alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="bannav">
            <ul>
              <li>
                <div class="bannavimg">
                  <img src="../../assets/images/限时秒杀.png" alt="限时秒杀" />
                </div>
                <p>限时秒杀</p>
              </li>
              <li>
                <div class="bannavimg">
                  <img src="../../assets/images/畅销商品.png" alt="畅销商品" />
                </div>
                <p>畅销商品</p>
              </li>
              <li>
                <div class="bannavimg">
                  <img src="../../assets/images/品质大牌.png" alt="品质大牌" />
                </div>
                <p>品质大牌</p>
              </li>
              <li>
                <div class="bannavimg">
                  <img src="../../assets/images/小u自营.png" alt="小U自营" />
                </div>
                <p>小u自营</p>
              </li>
              <li>
                <div class="bannavimg">
                  <img src="../../assets/images/积分商城.png" alt="积分商城" />
                </div>
                <p>积分商城</p>
              </li>
            </ul>
          </div>
        </section>
        <section class="xian">
          <div class="xianleft">
            <img src="../../assets/images/中上部左.png" alt="" />
            <div class="xianlefttext">
              <div class="xiantime">
                <h4>限时秒杀</h4>
                <a href="#">查看更多> </a>
              </div>
              <p>每天0点场 好货秒不停</p>
              <p></p>
            </div>
          </div>
          <div class="xianright">
            <div class="xiantop">
              <img src="../../assets/images/图层 36.png" alt="" />
              <div class="xiantext">
                <h4>品牌上新</h4>
                <p>9点整，抢大牌</p>
                <div class="fa">
                  <a href="#">疯抢红包></a>
                </div>
              </div>
            </div>
            <div class="xianbottom">
              <img src="../../assets/images/图层 37.png" alt="" />
              <div class="xiantext">
                <h4>日用好物</h4>
                <p>愿君多采</p>
                <div class="fa">
                  <a href="#">塞满奖券></a>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="order">
          <div class="ordernva">
            <ul>
              <li>双十一尖货预购</li>
              <li>畅购全球</li>
            </ul>
          </div>
          <div class="ordercontact">
            <ul class="inorder clearfix">
              <li>
                <div class="orimg">
                  <img src="../../assets/images/01.png" alt="" />
                  <p>套装/礼盒</p>
                </div>
              </li>
              <li>
                <div class="orimg">
                  <img src="../../assets/images/02.png" alt="" />
                  <p>彩妆套装</p>
                </div>
              </li>
              <li>
                <div class="orimg">
                  <img src="../../assets/images/03.png" alt="" />
                  <p>身体乳液/霜</p>
                </div>
              </li>
              <li>
                <div class="orimg">
                  <img src="../../assets/images/04.png" alt="" />
                  <p>爽肤水/化妆水</p>
                </div>
              </li>
            </ul>
          </div>
        </section>
        <section class="contact">
          <div class="contop">
            <div class="contopbt"></div>
            <h4>精选推荐</h4>
          </div>
          <ul v-if="oindexgoods.length >0">
            <li v-for="item in oindexgoods[0].content" :key="item.id" @click="goinfo(item.id)">
              <a href="#">
                <div class="conimg">
                  <img :src="$pre +item.img " alt="" />
                </div>
                <div class="context">
                  <h5>{{item.goodsname}}</h5>
                  <p>非转基因玉米</p>
                  <p>
                    <span>&yen;{{item.price}}起</span>
                    <span><del>&yen;{{item.market_price}}</del></span>
                  </p>
                </div>
              </a>
            </li>
          </ul>
        </section>
      </article>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      //存放搜索内容
      searchcontent:""
    };
  },
  computed: {
    ...mapGetters({
      oindexlist: "oindex/list",
      oindexban: "oindex/ban",
      oindexgoods: "oindex/goods",
    }),
  },
  methods: {
    ...mapActions({
      oindexasynclist: "oindex/asynclist",
      oindexasyncban: "oindex/asyncban",
      oindexasyncgoods: "oindex/asyncgoods",
    }),
    upthis(){
         this.$router.push("/productList?searchcontent=" + this.searchcontent)
    },
    goinfo(id){
      this.$router.push("/productDetails?id=" + id);
    }
  },
  components: {},
  mounted() {
    this.oindexasynclist(), 
    this.oindexasyncban(),
    this.oindexasyncgoods()
  },
  destroyed() {},
};
</script>

<style scoped>
@import url(../../assets/css/public.css);
@import url(../../assets/css/index.css);
</style>